/* =========================================================
   BRAND COLORS
========================================================= */

:root {

  --brand-blue: #236192;
  --brand-blue-dark: #102f4d;

  --brand-red: #6f263d;
  --brand-red-dark: #501c2d;

  --dark-bg: #221f1f;

  --games-bg: #edf3f8;

  --white: #ffffff;
  --black: #000000;

}


/* =========================================================
   PAGE RESET
========================================================= */

html,
body {

  margin: 0;
  padding: 0;

  overflow-x: hidden;

  min-height: 100%;

}


body {

  background-color: var(--white);

}


/* =========================================================
   HEADER
========================================================= */

header {

  background-color: var(--brand-blue);

}


header img {

  display: block;

  width: 100%;

  border-bottom: 5px solid var(--brand-red);

}


/* =========================================================
   HEADINGS
========================================================= */

h1,
h2,
h3,
h4 {

  color: var(--brand-red);

  font-weight: bold;

}


h1 {

  font-size: 4rem;

}


h2 {

  font-size: 2.25rem;

}


h3,
h4 {

  font-size: 2rem;

}


.section-title {

  color: var(--brand-blue);

  margin-bottom: 1rem;

  font-weight: bold;

}


hr {

  border: 0;

  border-top: 2px solid var(--brand-red);

  margin: 0;

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

  background-color: var(--black) !important;

  padding: 0.75rem 1rem;

}


.navbar .navbar-brand img {

  height: 50px;

}


.navbar .navbar-brand + img {

  height: 30px;

}


.navbar-nav {

  gap: 1rem;

  align-items: center;

  flex-wrap: wrap;

}


.navbar-toggler-icon {

  width: 1.5em;

  height: 1.5em;

  background-image: url('https://kseblobstorage.blob.core.windows.net/sitefiles/Avalanchetix/menu.png') !important;

}


.nav-link,
.nav-link-custom {

  color: var(--white) !important;

  font-weight: 600;

  font-size: 0.95rem;

  text-transform: uppercase;

  white-space: nowrap;

  padding: 0.5rem 0.75rem;

  transition:
    color .2s ease-in-out,
    background-color .2s ease-in-out;

  border-radius: 4px;

}


.nav-link:hover,
.nav-link:focus,
.nav-link-custom:hover,
.nav-link-custom:focus {

  color: var(--white) !important;

  background-color: var(--brand-blue);

}


.nav-link-custom.active {

  background-color: var(--brand-blue);

  color: var(--white) !important;

}


.dropdown-menu {

  background-color: var(--black);

  border: none;

  border-radius: 4px;

  padding: 0.5rem 0;

}


.dropdown-item {

  color: var(--white);

  font-weight: 500;

  padding: 0.5rem 1.25rem;

  transition:
    background-color .2s,
    color .2s;

}


.dropdown-item:hover {

  background-color: #222;

  color: var(--brand-blue);

}


.navbar-light {

  background-color: var(--black) !important;

}


/* =========================================================
   GAME SECTION
========================================================= */

.games-wrapper {

  width: 100%;

  padding: 55px 0 65px;

  background:
    linear-gradient(
      180deg,
      #f4f8fb 0%,
      #e7eef5 100%
    );

}


/* =========================================================
   GAME CARDS
========================================================= */

.game-card {

  background-color: var(--white);

  border: 0;

  border-top: 5px solid var(--brand-red);

  border-radius: 14px;

  overflow: hidden;

  box-shadow:
    0 8px 25px rgba(16, 47, 77, 0.13),
    0 2px 8px rgba(0, 0, 0, 0.06);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.game-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 16px 35px rgba(16, 47, 77, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.07);

}


.game-card .card-img-top {

  width: 100%;

  height: auto;

  display: block;

}


.game-card .card-body {

  padding: 1.5rem 1.5rem 1.6rem;

}


/* =========================================================
   GAME INFORMATION
========================================================= */

.game-date {

  margin: 0 0 0.35rem;

  font-size: 1.15rem;

  line-height: 1.3;

  font-weight: 700;

  color: #242424;

}


.game-opponent {

  margin: 0;

  font-size: 1.55rem;

  line-height: 1.2;

  font-weight: 800;

  color: var(--brand-blue-dark);

}


.game-time {

  margin: 0.7rem 0 1.25rem;

  font-size: 1.05rem;

  line-height: 1.2;

  font-style: italic;

  color: #5d6470;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn-primary {

  background-color: var(--brand-red) !important;

  border-color: var(--brand-red) !important;

  color: var(--white) !important;

}


.btn-primary:hover,
.btn-primary:focus {

  background-color: var(--brand-red-dark) !important;

  border-color: var(--brand-red-dark) !important;

}


.game-card .btn {

  width: 100%;

  padding: 0.7rem 1rem;

  border-radius: 8px;

  font-size: 1.05rem;

  font-weight: 600;

}


/* =========================================================
   CONTACT SECTION
========================================================= */

#contact-us-section {

  padding-top: 50px;

  padding-bottom: 50px;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

  background-color: var(--dark-bg);

  color: var(--white);

  padding-top: 25px;

  padding-bottom: 25px;

  margin-bottom: 0;

}


.footer-link {

  color: var(--white);

  text-decoration: none;

  transition: color .3s;

}


.footer-link:hover {

  color: #7eb9e6;

}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.social-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 0 10px;

  font-size: 1.5rem;

  color: var(--white);

  text-decoration: none;

  transition:
    color .3s,
    transform .3s;

}


.social-icon:hover {

  color: #7eb9e6;

  transform: scale(1.15);

}


.social-icon i,
.social-icon svg {

  display: block;

  width: 1.5rem;

  height: 1.5rem;

  vertical-align: middle;

}


.social-icon svg {

  fill: currentColor;

  position: relative;

  top: 7px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

  .navbar-nav {

    gap: 0.5rem;

    align-items: flex-start;

  }


  .navbar .navbar-brand img {

    height: 40px;

  }


  .navbar .navbar-brand + img {

    height: 26px;

  }

}


@media (max-width: 767.98px) {

  .games-wrapper {

    padding: 35px 0 45px;

  }


  .game-card .card-body {

    padding: 1.35rem 1.25rem 1.4rem;

  }


  .game-date {

    font-size: 1.1rem;

  }


  .game-opponent {

    font-size: 1.4rem;

  }


  .game-time {

    font-size: 1rem;

  }

}